<template>
    <div class="rank">
        <div class="tab">
            <div class="tab-tit clearfix">
                <a @click="activeIndex=index;" v-for="(item,index) in $store.state.product.rankList"
                   :key="item.typeId" href="javascript:;"
                   :class="{on:activeIndex===index}">
                    <p class="img">
                        <i></i>
                    </p>
                    <p class="text">{{item.typeTitle}}排行</p>
                </a>
            </div>

        </div>

        <div v-show="activeIndex===index" v-for="(item,index) in $store.state.product.rankList" :key="item.typeId" class="content">
            <ul>
                <li>
                    <div v-for="info in item.goodsList" :key="info.id" class="img-item">
                        <p class="tab-pic">
                            <a href="#">
                                <img :src="info.goodsImg">
                            </a>
                        </p>
                        <div class="tab-info">
                            <div class="info-title">
                                <a href="#">{{info.goodsName}}</a>
                            </div>
                            <p class="info-price">定金：{{info.goodsPrice/1 | currency("￥")}}</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "Rank",
    data(){
        return {
            // 选中的下标
            activeIndex:0
        }
    },
    mounted(){
        this.$store.dispatch("product/getRankListAsync");
    }
}
</script>

<style lang="less" scoped>
.rank {
    width: 1200px;
    margin: 0 auto;

    .tab {
        margin: 0 auto;
        overflow: hidden;
        width: 312px;

        .tab-tit {
            text-align: center;

            a {
                display: block;
                padding: 0 18px;
                float: left;
                text-decoration: none;
                font-size: 16px;
                color: #999;

                p {
                    margin: 5px 0;
                }

                .img {
                    i {
                        width: 35px;
                        height: 35px;
                        display: block;
                        background: url(./img/bg0.png);
                        margin-left: 10px;
                    }
                }

                .text {
                    line-height: 28px;
                }
            }

            .on {
                color: #e60012;

                .img {
                    i {
                        background-position: -35px 0;
                    }
                }
            }
        }
    }

    .content {
        overflow: hidden;
        padding: 10px;

        ul {
            li {
                overflow: hidden;
                list-style: none;
                line-height: 18px;

                .img-item {
                    border: 1px solid #e1251b;
                    width: 269px;
                    float: left;
                    overflow: hidden;
                    margin: 0 12px 10px;
                    background: #fff;

                    .tab-pic {
                        width: 230px;
                        height: 210px;
                        overflow: hidden;
                        text-align: center;
                        margin: 5px auto 18px;

                        a {
                            img {
                                width: 200px;
                                height: 200px;
                            }
                        }
                    }

                    .tab-info {
                        background: #fafafa;

                        .info-title {
                            height: 50px;
                            line-height: 28px;
                            overflow: hidden;
                            margin: 0 auto;
                            padding-left: 10px;

                            a {
                                color: #333;
                                text-decoration: none;
                            }
                        }

                        .info-price {
                            font-size: 20px;
                            color: #e1251b;
                            height: 35px;
                            padding-left: 10px;
                            display: block;
                            line-height: 24px;
                            margin: 10px auto 0;
                        }
                    }
                }
            }
        }
    }
}
</style>